'use strict'
const path = require("path");
const glob = require('glob');
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const {CleanWebpackPlugin} = require("clean-webpack-plugin");

const HtmlWebpackExternalsPlugin = require("html-webpack-externals-plugin");

function setMPA() {
  const entry = {};
  const htmlWebpackPlugins = [];
  const entryFiles = glob.sync(path.join(__dirname, './src/*/index.js'));
  Object.keys(entryFiles).map((index) => {
    const entryFile = entryFiles[index];
    const match = entryFile.match(/src\/(.*)\/index\.js/);
    const pageName = match && match[1];
    entry[pageName] = entryFile; 
    htmlWebpackPlugins.push(new HtmlWebpackPlugin({
      title: "Hot Module Replacement",
      template: path.join(__dirname, `src/${pageName}/index.html`),
      filename: `${pageName}.html`,
      chunks: ['vendors',pageName],
      inject: true, //js，css自动注入HTML
      minify: {
        //压缩相关
        html5: true,
        collapseWhitespace: true,
        minifyCSS: true,
        minifyJS: true,
      }
    }))
  })
  return {
    entry,
    htmlWebpackPlugins
  }
}

const {entry, htmlWebpackPlugins} = setMPA();

module.exports = {
  mode: "production",
  entry,
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].js",
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: "babel-loader",
      },
      // 解析css,less,sass
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"], // 链式调用，从右到左实际执行先用css-loader解析css再传递给style-loader
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"], // 链式调用，从右到左实际执行先用css-loader解析css再传递给style-loader
      },
      // file-loader解析图片、字体文件
      {
        test: /\.(png|gif|jpg|jpeg)$/,
        use: [
          {
            loader: "url-loader",
            options: {
              limit: 20480, // url-loader处理图片和字体 可以设置较小资源自动base64(小于设置的limit自动转为base64)
            },
          },
        ],
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: "file-loader",
      },
    ],
  },
  plugins: [
    new CleanWebpackPlugin(),
    // new webpack.NamedModulesPlugin(),
    // new HtmlWebpackExternalsPlugin({
    //   externals: [
    //     {
    //       module: 'react',
    //       entry: '',
    //       global: 'React'
    //     }
    //     {
    //       module: 'react-dom',
    //       entry: '',
    //       global: 'ReactDom'
    //     }
    //   ]
    // }),
    new webpack.HotModuleReplacementPlugin(),
  ].concat(htmlWebpackPlugins),
  optimization: {
    splitChunks: {
      // chunks: 'async',
      minSize: 1000, //只要饮用就打包
      // minRemainingSize: 0,
      // minChunks: 1,
      // maxAsyncRequests: 30,
      // maxInitialRequests: 30,
      // enforceSizeThreshold: 50000,
      cacheGroups: {
        commons: {
          // test: /[\\/]node_modules[\\/]/,
          // test: /(react|react-dom)/,
          name: "vendors",
          chunks: "all",
          minChunks: 2
        },
      },
    },
  },
  // devtool: "cheap-source-map",
  devServer: {
    contentBase: './dist',
    hot: true
  },
};